<template>
  <div class="football-container">
    <!-- 日期选择卡片 -->
    <el-card shadow="never" class="result-container">
      <div class="day-scroll-container">
        <div class="day-scroll">
          <div
            v-for="(dayResult, index) in list"
            :key="index"
            class="day-card"
            :class="{ 'active-card': activeIndex === index }"
            @click="handleDayClick(dayResult, index)"
          >
            <div class="day-show">{{ dayResult.dayShow }}<span class="week">周{{ dayResult.week
              }}</span></div>
            <div class="match-stats">
              <div class="stat-item stat-highlight">选 {{ dayResult.selectCount }} <span
                style="font-weight: bold;color: red">中 {{ dayResult.shoot }}</span></div>
            </div>
          </div>
          <div class="date-picker-wrapper">
            <el-date-picker
              v-model="selectedDate"
              type="date"
              placeholder="25-2-22->赛事回查"
              value-format="YYYY-MM-DD"
              @change="getList"
              class="direct-date-picker"
              :popper-class="'custom-popper'"
            />
          </div>
        </div>
      </div>
    </el-card>

    <!-- 比赛列表表格 -->
    <el-table
      :data="currentMatchList"
      style="width: 100%"
      border
      stripe
      v-loading="loading"
      class="compact-table"
      row-key="matchId"
      :expand-row-keys="expandRowKeys"
      @expand-change="handleExpandChange"
      :header-cell-style="{
        background: '#f5f7fa',
        color: '#606266',
        padding: '1px 0',
        fontSize: '13px',
        textAlign: 'center',
        height: '40px'
      }"
      :cell-style="{
        padding: '1px 0',
        textAlign: 'center'
      }"
    >
      <!-- 表格列定义 -->
      <el-table-column prop="number" label="编号" width="75" align="center">
        <template #default="{ row }">
          <a class="no-underline" :href="row.analysis" target="_blank">{{ row.number }}</a>
        </template>
      </el-table-column>

      <el-table-column prop="match" label="赛事名称" width="90" align="center">
        <template #default="{ row }">
          <a class="no-underline match-tag"
             :style="{ backgroundColor: row.color }"
             :href="row.matchUrl"
             target="_blank"
          >{{ row.match }}</a>
        </template>
      </el-table-column>

      <el-table-column prop="openTime" label="开赛时间" width="90" align="center" />

      <el-table-column label="主队" width="100" align="center" sortable prop="selectSort">
        <template #default="{ row }">
          <p style="position: absolute; top: 0; left: 0; margin: 0;">
            <span v-if="row.selectSort && Number(row.selectSort) > 0" class="ico-sort">
              {{ row.selectSort }}
            </span>
          </p>
          <div>
            <a class="no-underline team-link" :href="row.homeTeamUrl"
               target="_blank">{{ row.homeTeam }}</a>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="(半场)全场" width="90" align="center">
        <template #default="{ row }">
          <a class="no-underline score"
             :href="`https://odds.500.com/fenxi/shuju-${row.matchId}.shtml`"
             target="_blank"
          >{{ row.halfFullCourt }}</a>
        </template>
      </el-table-column>

      <el-table-column label="客队" width="100" align="center">
        <template #default="{ row }">
          <a class="no-underline team-link" :href="row.visitTeamUrl"
             target="_blank">{{ row.visitingTeam }}</a>
        </template>
      </el-table-column>

      <el-table-column label="比分推荐(半场)[全场]" width="200" align="center" sortable
                       prop="ballDiffSort">
        <template #default="{ row }">
          <template v-if="row.teamScore">
            <div class="score-prediction">
              <div class="prediction-row">
                <span class="prediction-label">推测值</span>
                <span>（{{ row.homePreScoreBan }}:{{ row.awayPreScoreBan }}）【{{ row.scoreSelect
                  }}】</span>
              </div>
              <div class="prediction-row">
                <span class="prediction-label">精算值</span>
                <span>（{{ row.homeAlgScoreBan }}:{{ row.awayAlgScoreBan }}）【{{ row.homeAlgScoreQuan
                  }}:{{ row.awayAlgScoreQuan }}】</span>
              </div>
              <div class="prediction-row">
                <span class="prediction-label">进球差</span>
                <span>&nbsp;&nbsp;{{ row.ballDiff }}</span>
              </div>
              <div class="prediction-row" v-if="row.ouResult">
                <span class="prediction-label">方向值</span>
                <span class="direction-value">&nbsp;&nbsp;{{ row.ouResult }}</span>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="no-data">4点开放</div>
          </template>
        </template>
      </el-table-column>

      <el-table-column label="进球推荐" width="100" align="center">
        <template #default="{ row }">
          <div v-if="row.teamScore" class="goal-prediction">
            <div class="prediction-row">
              <span class="prediction-label">推测值</span>
              <span>{{ row.ballNum }}</span>
            </div>
            <div class="prediction-row">
              <span class="prediction-label">精算值</span>
              <span>{{ row.ballNumPredict }}</span>
            </div>
          </div>
        </template>
      </el-table-column>

      <!--      <el-table-column label="让球" width="55" align="center">-->
      <!--        <template #default="{ row }">-->
      <!--          <div class="handicap">-->
      <!--            <p style="position: absolute; top: 0; left: 0; margin: 0;">-->
      <!--              <span v-if="row.isSingle === '1'" class="ico-dg">单</span>-->
      <!--            </p>-->
      <!--            <p class="itm-rangA1" title="不让球">-->
      <!--              0-->
      <!--            </p>-->
      <!--            <p class="itm-rangA2" :title="getHandicapTitle(row.letBall)">-->
      <!--              {{ row.letBall }}-->
      <!--            </p>-->
      <!--          </div>-->
      <!--        </template>-->
      <!--      </el-table-column>-->

      <el-table-column label="胜平负" width="150" align="center">
        <template #header>
          <div class="odds-header">
            <div class="odds-row" style="position: relative">
              <span style="position: absolute; top: 0; left: 0; margin: 0;">
                  让球
              </span>
              <span style="padding-left: 30px">胜</span>
              <span>平</span>
              <span>负</span>
            </div>
          </div>
        </template>
        <template #default="{ row }">
          <div class="odds-grid">
            <div class="odds-row">
              <div class="handicap">
                <p style="position: absolute; top: 0; left: 0; margin: 0;">
                  <span v-if="row.isSingle === '1'" class="ico-dg">单</span>
                </p>
              </div>
              <span class="itm-rangA2" :title="getHandicapTitle(row.letBall)">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              </span>
              <span
                @dblclick="selectPay(row.matchId, 1)"
                :class="['odds-item', { 'win-pay': row.winFlag === 1, 'selected': row.winSelect === 1 }]"
              >{{ row.winPay }}</span>
              <span
                @dblclick="selectPay(row.matchId, 2)"
                :class="['odds-item', { 'win-pay': row.drawWinFlag === 1, 'selected': row.drawWinSelect === 1 }]"
              >{{ row.drawPay }}</span>
              <span
                @dblclick="selectPay(row.matchId, 3)"
                :class="['odds-item', { 'win-pay': row.visitWinFlag === 1, 'selected': row.visitWinSelect === 1 }]"
              >{{ row.visitPay }}</span>
            </div>
            <div class="divider"></div>
            <div class="odds-row">
              <span class="itm-rangA2" :title="getHandicapTitle(row.letBall)">
               {{ row.letBall }}
              </span>
              <span style="margin-left: 15px !important;"
                    @dblclick="selectPay(row.matchId, 4)"
                    :class="['odds-item', { 'win-pay': row.letWinFlag === 1, 'selected': row.letWinSelect === 1 }]"
              >{{ row.letWinPay }}</span>
              <span
                @dblclick="selectPay(row.matchId, 5)"
                :class="['odds-item', { 'win-pay': row.letDrawWinFlag === 1, 'selected': row.letDrawWinSelect === 1 }]"
              >{{ row.letDrawPay }}</span>
              <span
                @dblclick="selectPay(row.matchId, 6)"
                :class="['odds-item', { 'win-pay': row.letVisitWinFlag === 1, 'selected': row.letVisitWinSelect === 1 }]"
              >{{ row.letVisitPay }}</span>
            </div>

          </div>
        </template>
      </el-table-column>

      <el-table-column prop="openTime" label="更多玩法" width="80" align="center">
        <template #default="{ row }">
          <div class="more-play-button-container">
            <button
              class="more-play-button"
              @click.stop="toggleExpand(row)"
            >
              <span v-if="row.expanded">
                收起
              </span>
              <span v-else>
                展开
              </span>

              <!--              <span class="arrow-icon" :class="{ 'expanded': row.expanded }">-->
              <!--                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none"-->
              <!--                       xmlns="http://www.w3.org/2000/svg">-->
              <!--                    <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2"-->
              <!--                          stroke-linecap="round" stroke-linejoin="round" />-->
              <!--                  </svg>-->
              <!--                </span>-->
            </button>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="赔率差异" width="220" align="center">
        <template #header>
          <div class="diff-header">
            <div class="diff-row">
              <span>胜赔差异</span>
              <span>平赔差异</span>
              <span>负赔差异</span>
            </div>
          </div>
        </template>
        <template #default="{ row }">
          <div class="diff-grid">
            <div class="diff-row">
              <span class="diff-item">{{ row.winRate }}</span>
              <span class="diff-item">{{ row.drawWinRate }}</span>
              <span class="diff-item">{{ row.visitWinRate }}</span>
            </div>
            <div class="divider"></div>
            <div class="diff-row">
              <span class="diff-item">{{ row.letWinRate }}</span>
              <span class="diff-item">{{ row.letDrawWinRate }}</span>
              <span class="diff-item">{{ row.letVisitWinRate }}</span>
            </div>
            <div class="divider"></div>
            <div class="diff-row">
              <span class="diff-item">{{ row.minusWinRate }}</span>
              <span class="diff-item">{{ row.minusDrawWinRate }}</span>
              <span class="diff-item">{{ row.minusVisitWinRate }}</span>
            </div>
            <template v-if="row.ouHomeRate">
              <div class="divider"></div>
              <div class="diff-row">
                <span class="diff-item">{{ row.ouHomeRate }}</span>
                <span class="diff-item">{{ row.ouDrawRate }}</span>
                <span class="diff-item">{{ row.ouVisitRate }}</span>
              </div>
            </template>
          </div>
        </template>
      </el-table-column>

      <!-- 更多玩法展开列 -->
      <el-table-column type="expand" width="1">
        <template #default="{ row }">
          <div v-if="row.expanded" class="expanded-content">
            <table class="bet-more-tb">
              <tbody>
              <tr>
                <th>半全场</th>
                <td
                  v-for="(half, index) in row.halfWholeOddLists"
                  :key="index"
                >
                  <p class="sbetbtn"
                     :class="{ 'winning': row.awards && row.awards[3] === half.desc }"
                  >{{ half.desc }}<i>{{ half.rate }}</i></p></td>
              </tr>
              </tbody>
            </table>
            <table class="bet-more-tb">
              <tbody>
              <!-- 动态生成行 -->
              <tr v-for="(scoreRow, rowIndex) in row.scoreOddLists" :key="rowIndex">
                <!-- 第一行添加 rowspan 标题 -->
                <th v-if="rowIndex === 0" :rowspan="row.scoreOddLists.length">比分</th>
                <!-- 动态生成单元格 -->
                <td v-for="(score, colIndex) in scoreRow" :key="colIndex">
                  <p class="sbetbtn"
                     :class="{ 'winning': row.awards && row.awards[4] === score.desc }"
                  >
                    {{ score.desc }}<i>{{ score.rate }}</i>
                  </p>
                </td>
              </tr>
              </tbody>
            </table>
            <table class="bet-more-tb">
              <tbody>
              <tr>
                <th>进球数</th>
                <td
                  v-for="(ball, index) in row.ballOddLists"
                  :key="index">
                  <p class="sbetbtn"
                     :class="{ 'winning': row.awards && row.awards[2] === ball.desc }"
                  >{{ ball.desc }}<i>{{ ball.rate }}</i></p>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 修改后的底部投注面板 -->
<!--  <div class="panel-wrap" :style="{ bottom: panelBottom }">-->
<!--    <div class="panel">-->
<!--      <div class="panel-in clrfix">-->
<!--        <div class="panel-l">-->
<!--          <div class="panel-l-main clrfix">-->
<!--            <div class="panel-select">-->
<!--              <span class="panel-select-btn on">已选<b>{{ selectedCount }}</b>场<span-->
<!--                class="arrow"></span></span>-->
<!--            </div>-->
<!--            <div class="panel-info">-->
<!--              <div class="panel-guog">-->
<!--                过关方式：-->
<!--                <span class="itm" v-for="type in betTypes" :key="type.value" :title="type.label">-->
<!--                  <span-->
<!--                    class="chkbox"-->
<!--                    :class="{ 'selected': selectedBetType === type.value }"-->
<!--                    @click="selectBetType(type.value)"-->
<!--                  ></span> {{ type.label }}-->
<!--                </span>-->
<!--                <div class="panel-guog-more">-->
<!--                  <span class="more-text"-->
<!--                        @click="showMoreBetTypes = !showMoreBetTypes">更多过关</span>-->
<!--                  <div class="more-options" v-show="showMoreBetTypes">-->
<!--                    <div class="more-options-inner">-->
<!--                      <ul>-->
<!--                        <li v-for="type in moreBetTypes" :key="type.value"-->
<!--                            @click="selectBetType(type.value)">-->
<!--                          <span class="chkbox"-->
<!--                                :class="{ 'selected': selectedBetType === type.value }"></span>-->
<!--                          {{ type.label }}-->
<!--                        </li>-->
<!--                      </ul>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="panel-bei">-->
<!--                <span class="panel-numsel-wrap">-->
<!--                  倍数：-->
<!--                  <span class="numsel">-->
<!--                    <span class="numsel-jian" @click="decrementMultiplier"><span></span></span>-->
<!--                    <span class="numsel-inp">-->
<!--                      <input-->
<!--                        type="text"-->
<!--                        v-model="multiplierInput"-->
<!--                        @input="validateMultiplier"-->
<!--                        @blur="onMultiplierBlur"-->
<!--                      />-->
<!--                    </span>-->
<!--                    <span class="numsel-jia" @click="incrementMultiplier"><span></span></span>-->
<!--                  </span> 倍-->
<!--                </span>-->
<!--                <span class="panel-price">金额：<span>{{ totalAmount }}<i>元</i></span></span>-->
<!--                <span class="panel-bonus">预计奖金：<span>{{ estimatedPrize }}<i>元</i></span></span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
  import dayjs from 'dayjs';
  import { FootballMatchApi } from '@/api/lottery/sporttery/footballmatch';

  // 定义类型
  interface FootballDayResultVO {
    dayShow: string;
    week: string;
    selectCount: number;
    shoot: number;
    matchList: AppFootballMatchRespVO[];
  }

  // 定义类型
  interface HalfScoreBallVo {
    desc?: string;
    rate?: string;
  }

  interface AppFootballMatchRespVO {
    matchId: string;
    number: string;
    match: string;
    color: string;
    openTime: string;
    homeTeam: string;
    visitingTeam: string;
    halfFullCourt: string;
    homePreScoreBan: number;
    awayPreScoreBan: number;
    scoreSelect: string;
    homeAlgScoreBan: number;
    awayAlgScoreBan: number;
    homeAlgScoreQuan: number;
    awayAlgScoreQuan: number;
    ballDiff: number;
    ballDiffSort: number;
    ouResult?: string;
    ballNum: number;
    ballNumPredict: number;
    isSingle: string;
    letBall: string;
    winPay: string;
    drawPay: string;
    visitPay: string;
    letWinPay: string;
    letDrawPay: string;
    letVisitPay: string;
    winFlag: number;
    drawWinFlag: number;
    visitWinFlag: number;
    letWinFlag: number;
    letDrawWinFlag: number;
    letVisitWinFlag: number;
    winRate: string;
    drawWinRate: string;
    visitWinRate: string;
    letWinRate: string;
    letDrawWinRate: string;
    letVisitWinRate: string;
    minusWinRate: string;
    minusDrawWinRate: string;
    minusVisitWinRate: string;
    ouHomeRate?: string;
    ouDrawRate?: string;
    ouVisitRate?: string;
    selectSort?: number;
    teamScore: boolean;
    expanded: boolean;
    halfWholeOddLists: HalfScoreBallVo[];
    scoreOddLists: HalfScoreBallVo[][];
    ballOddLists: HalfScoreBallVo[];
    awards?: string[];  // 可选属性，匹配Java的@ExcelProperty
    // 其他字段...
  }

  const loading = ref(true);
  const list = ref<FootballDayResultVO[]>([]);
  const currentMatchList = ref<AppFootballMatchRespVO[]>([]);
  const activeIndex = ref<number | null>(null);
  const expandRowKeys = ref<string[]>([]); // 控制展开行的keys
  const selectedDate = ref<string>(); // 默认选中当天

  // 处理展开状态变化
  const handleExpandChange = (row: AppFootballMatchRespVO, expanded: boolean) => {
    row.expanded = expanded;
    updateExpandKeys(row.matchId, expanded);
  };

  // 更新展开keys数组
  const updateExpandKeys = (matchId: string, expanded: boolean) => {
    const index = expandRowKeys.value.indexOf(matchId);
    if (expanded && index === -1) {
      expandRowKeys.value.push(matchId);
    } else if (!expanded && index !== -1) {
      expandRowKeys.value.splice(index, 1);
    }
  };

  // 切换展开状态
  const toggleExpand = (row: AppFootballMatchRespVO) => {
    const newExpanded = !row.expanded;
    row.expanded = newExpanded;
    updateExpandKeys(row.matchId, newExpanded);
  };


  const queryParams = reactive({
    pageNo: 0,
    pageSize: 10,
    selectedDate,
  });

  // 从sessionStorage获取保存的activeIndex
  const getSavedActiveIndex = (): number | null => {
    const savedIndex = sessionStorage.getItem('footballDayResultsActiveIndex');
    return savedIndex !== null ? parseInt(savedIndex) : null;
  };

  // 保存activeIndex到sessionStorage
  const saveActiveIndex = (index: number | null) => {
    if (index !== null) {
      sessionStorage.setItem('footballDayResultsActiveIndex', index.toString());
    } else {
      sessionStorage.removeItem('footballDayResultsActiveIndex');
    }
  };

  // 获取当天日期的索引
  const getTodayIndex = (data: FootballDayResultVO[]): number => {
    if (data.length === 0) return -1;
    const today = dayjs().format('MM-DD');
    const todayIndex = data.findIndex(item => item.dayShow === today);
    return todayIndex !== -1 ? todayIndex : data.length - 1;
  };


  const getList = async () => {
    loading.value = true;
    try {
      // 模拟API请求延迟
      // await new Promise(resolve => setTimeout(resolve, 800));
      // list.value = generateMockData();
      const data = await FootballMatchApi.getDayResultList(queryParams);
      list.value = data;
      if (list.value.length > 0) {
        // 尝试从sessionStorage中恢复上次选中的索引
        const savedIndex = getSavedActiveIndex();

        // 确定初始显示的索引
        let initialIndex = list.value.length - 1;
        const todayIndex = getTodayIndex(list.value);
        if (todayIndex !== -1) {
          initialIndex = todayIndex;
        }
        if (savedIndex !== null && savedIndex < list.value.length) {
          initialIndex = savedIndex;
        }

        activeIndex.value = initialIndex;
        currentMatchList.value = list.value[initialIndex].matchList;
      }
    } finally {
      loading.value = false;
    }
  };

  // const formatDateTime = (dateTime: string | number | Date) => {
  //   if (!dateTime) return '-';
  //   return dayjs(dateTime).format('MM-DD HH:mm');
  // };

  const getHandicapTitle = (letBall: string) => {
    const num = parseInt(letBall);
    return num > 0
      ? `主队受让${Math.abs(num)}球`
      : `主队让${Math.abs(num)}球`;
  };

  const selectPay = async (matchId: number, index: number) => {
    ElMessageBox.confirm('确定要选择这个选项吗？', '确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      const loading = ElLoading.service({ text: '操作中...' });
      try {
        // 模拟API请求
        // await new Promise(resolve => setTimeout(resolve, 500));
        // ElMessage.success('选择成功');
        // 在实际应用中这里会调用API并更新数据
        await FootballMatchApi.footballSelect(matchId, index);
        await getList();
        ElMessage.success('选择成功');
      } catch (error) {
        ElMessage.error('选择异常');
      } finally {
        loading.close();
      }
    }).catch(() => {
      ElMessage.info('操作已取消');
    });
  };

  const handleDayClick = (dayResult: FootballDayResultVO, index: number) => {
    activeIndex.value = index;
    currentMatchList.value = dayResult.matchList;
    // 清空所有展开状态
    expandRowKeys.value = [];
    currentMatchList.value.forEach(match => {
      match.expanded = false;
    });
    // 保存当前选中的索引
    saveActiveIndex(index);
  };

  // 新增：处理日期变更
  const handleDateChange = async (val: string | null) => {
    if (!val) return;

    loading.value = true;
    try {
      list.value = await FootballMatchApi.getDayResultList({
        ...queryParams,
      });

      // 查找选中日期在列表中的位置
      const targetDay = dayjs(val).format('MM-DD');
      const index = list.value.findIndex(item => item.dayShow === targetDay);

      if (index !== -1) {
        activeIndex.value = index;
        currentMatchList.value = list.value[index].matchList;
        saveActiveIndex(index);
      } else {
        ElMessage.warning('未找到该日期的比赛数据');
        currentMatchList.value = [];
      }
    } catch (error) {
      ElMessage.error('获取数据失败');
    } finally {
      loading.value = false;
    }
  };

  // 新增底部面板相关状态
  const selectedMatches = ref<Array<any>>([
    {
      number: '周三002',
      homeTeam: '韩国女',
      visitingTeam: '中国女',
      betOption: '胜',
      odds: '4.00',
    },
    {
      number: '周三003',
      homeTeam: '谢尔本',
      visitingTeam: '林菲尔德',
      betOption: '平',
      odds: '3.15',
    },
  ]);

  // 修复：使用字符串类型的输入值
  const multiplierInput = ref('1');
  const lockPanel = ref(false);
  const showSelections = ref(true);
  const panelBottom = ref('0px');

  const selectedCount = computed(() => selectedMatches.value.length);
  const selectedBetType = ref('2串1');

  // 计算数字类型的倍数（用于计算）
  const multiplier = computed(() => {
    const num = parseInt(multiplierInput.value);
    return isNaN(num) ? 1 : Math.min(100, Math.max(1, num));
  });

  const betTypes = [
    { value: '2串1', label: '2串1' },
    { value: '3串1', label: '3串1' },
    { value: '4串1', label: '4串1' },
  ];

  const totalAmount = computed(() => {
    return (selectedCount.value * multiplier.value * 2).toFixed(2);
  });

  const estimatedPrize = computed(() => {
    let totalOdds = 1;
    selectedMatches.value.forEach(match => {
      totalOdds *= parseFloat(match.odds);
    });
    return (totalOdds * multiplier.value * 2).toFixed(2);
  });

  // 操作方法
  const selectBetType = (type: string) => {
    selectedBetType.value = type;
  };

  const incrementMultiplier = () => {
    const newValue = multiplier.value + 1;
    if (newValue <= 100) {
      multiplierInput.value = newValue.toString();
    }
  };

  const decrementMultiplier = () => {
    const newValue = multiplier.value - 1;
    if (newValue >= 1) {
      multiplierInput.value = newValue.toString();
    }
  };

  // 修复：处理字符串输入
  const validateMultiplier = () => {
    // 只允许输入数字
    multiplierInput.value = multiplierInput.value.replace(/[^\d]/g, '');

    // 如果输入为空，设置为1
    if (multiplierInput.value === '') {
      multiplierInput.value = '1';
    }
  };

  const onMultiplierBlur = () => {
    // 确保值在1-100范围内
    if (multiplier.value < 1) {
      multiplierInput.value = '1';
    } else if (multiplier.value > 100) {
      multiplierInput.value = '100';
    }
  };

  const removeMatch = (index: number) => {
    selectedMatches.value.splice(index, 1);
  };

  const clearAll = () => {
    selectedMatches.value = [];
  };

  // 面板自动隐藏/显示逻辑
  onMounted(() => {
    let lastScrollPosition = 0;

    window.addEventListener('scroll', () => {
      if (lockPanel.value) return;

      const currentPosition = window.scrollY;
      if (currentPosition > lastScrollPosition) {
        // 向下滚动，隐藏面板
        panelBottom.value = '-120px';
      } else {
        // 向上滚动，显示面板
        panelBottom.value = '0px';
      }
      lastScrollPosition = currentPosition;
    });
  });

  onMounted(() => {
    getList();
    // 初始加载当天数据
    // handleDateChange(selectedDate.value);
  });
</script>

<style scoped>
  .football-container {
    max-width: 1800px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  /* 日期选择卡片样式 */
  .result-container {
    border-radius: 8px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  }

  .day-scroll-container {
    width: 100%;
    overflow-x: auto;
    display: flex;
    justify-content: center;
  }

  .day-scroll {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 16px;
  }

  .day-card {
    flex: 0 0 auto;
    width: 90px;
    padding: 8px 5px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #ebeef5;
    text-align: center;
  }

  .day-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .day-card.active-card {
    background-color: #f0f7ff;
    border-color: #409eff;
    box-shadow: 0 1px 6px rgba(64, 158, 255, 0.3);
  }

  .day-show {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
    color: #2c3e50;
  }

  .week {
    font-size: 11px;
    color: #909399;
    margin-left: 4px;
  }

  /* 调整弹出层样式 */
  .custom-popper {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    border: none;
  }

  .date-picker-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 10px;
    width: 160px;
  }

  .direct-date-picker {
    width: 160px;
  }

  .match-stats {
    font-size: 11px;
  }

  .stat-highlight {
    background-color: #f0f7ff;
    color: #409eff;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
  }

  /* 紧凑表格样式 */
  .compact-table {
    font-size: 12px;
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* 链接样式 */
  .no-underline {
    text-decoration: none;
    color: black;
  }

  .match-tag {
    display: inline-block;
    min-width: 70px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    color: white;
    border-radius: 3px;
    padding: 0 4px;
    font-weight: 500;
  }

  .team-link {
    color: #333;
    transition: color 0.2s;
    font-weight: 500;
  }

  .team-link:hover {
    color: #409eff;
  }

  .score {
    color: #f56c6c;
    font-weight: bold;
    font-size: 14px;
  }

  /* 比分推荐样式 */
  .score-prediction {
    font-size: 11px;
    line-height: 1.4;
    padding: 5px 0;
  }

  .prediction-row {
    display: flex;
    margin-bottom: 2px;
    align-items: center;
  }

  .prediction-label {
    flex: 0 0 40px;
    background-color: rgb(187, 87, 83);;
    color: white;
    text-align: center;
    margin-right: 4px;
    border-radius: 2px;
    padding: 1px 0;
    font-size: 12px;
  }

  .direction-value {
    font-weight: bold;
    color: #f56c6c;
    font-size: 13px;
  }

  .no-data {
    color: #909399;
    font-style: italic;
  }

  /* 让球样式 */
  .handicap {
    line-height: 1.4;
    padding: 5px 0;
  }

  .itm-rangA1 {
    margin: 0;
    font-size: 11px;
    color: #909399;
  }

  .itm-rangA2 {
    margin: 0;
    color: #67c23a;
    font-weight: 500;
    font-size: 13px;
  }

  .ico-dg {
    position: absolute;
    top: 0;
    display: inline-block;
    background-color: #f56c6c;
    color: white;
    font-size: 11px;
    padding: 0 2px;
    border-radius: 2px;
  }

  .ico-sort {
    position: absolute;
    top: 0;
    left: 5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid red;
    color: red;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
  }

  /* 赔率样式 */
  .odds-grid, .diff-grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .odds-row, .diff-row {
    display: flex;
    justify-content: space-around;
    gap: 1px;
  }

  .odds-item, .diff-item {
    flex: 1;
    text-align: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    border-radius: 3px;
  }

  .odds-item {
    cursor: pointer;
    transition: all 0.2s;
    background-color: #f8f9fa;
  }

  .odds-item:hover {
    background-color: #ebf5ff;
  }

  .win-pay {
    color: #f56c6c;
    font-weight: bold;
  }

  .selected {
    background-color: #ffff00 !important;
  }

  .divider {
    height: 1px;
    background-color: #ebeef5;
    margin: 3px 0;
  }

  /* 更多玩法按钮样式 */
  .more-play-button-container {
    display: flex;
    justify-content: center;
    margin-top: 5px;
  }

  .more-play-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    background-color: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    color: #606266;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
    outline: none;
  }

  .more-play-button:hover {
    background-color: #ecf5ff;
    border-color: #c6e2ff;
    color: #409eff;
  }

  .arrow-icon {
    margin-left: 4px;
    transition: transform 0.3s;
    display: flex;
    align-items: center;
  }

  .arrow-icon.expanded {
    transform: rotate(180deg);
  }

  /* 展开行样式 */
  .expanded-content {
    background-color: #ecf2fb;
    padding: 15px;
    border-radius: 0 0 8px 8px;
    margin: -1px -1px -1px -1px;
    border: 1px solid #b4cce8;
  }

  .bet-more-tb {
    width: 100%;
    margin-bottom: 15px;
    border-collapse: collapse;
  }

  .bet-more-tb th {
    width: 64px;
    vertical-align: middle;
    font-size: 12px;
    text-align: center;
    border: 1px solid #B4CCE8;
    color: #000;
    background: #fff;
    padding: 8px;
    font-weight: 600;
  }

  .bet-more-tb td {
    vertical-align: middle;
    text-align: center;
    border: 1px solid #B4CCE8;
    background: #fff;
    padding: 5px;
  }

  .sbetbtn {
    cursor: pointer;
    padding: 8px 5px;
    height: 40px;
    border: 1px solid #fff;
    width: 70px;
    text-align: center;
    line-height: 1.2;
    font-size: 12px;
    color: #6d91b7;
    background: #fff;
    border-radius: 4px;
    transition: all 0.2s;
    display: block;
    margin: 0 auto;
  }

  .sbetbtn:hover {
    background-color: #e6f7ff;
    border-color: #91d5ff;
  }

  .sbetbtn i {
    display: block;
    font-weight: bold;
    color: black;
    font-style: normal;
    margin-top: 3px;
  }

  /* 滚动条样式 */
  .day-scroll-container::-webkit-scrollbar {
    height: 4px;
  }

  .day-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  .day-scroll-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
  }

  .day-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }

  /* 隐藏默认展开图标 */
  :deep(.el-table th.el-table__expand-column),
  :deep(.el-table td.el-table__expand-column) {
    display: none;
  }

  .winning {
    font-weight: bold !important;
    color: red !important;
  }

  /* 如果需要文字和图标都加粗红色 */
  .winning, .winning i {
    font-weight: bold !important;
    color: red !important;
  }

  /* 新增底部面板样式 */
  .panel-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transition: bottom 0.3s ease;
  }

  .panel {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
    position: relative;
  }

  .panel-in {
    padding: 10px;
  }

  .panel-l-main {
    display: flex;
    align-items: center;
    padding: 5px 0;
  }

  .panel-select {
    margin-right: 15px;
  }

  .panel-select-btn {
    display: inline-block;
    padding: 5px 10px;
    background: #e4393c;
    color: white;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
  }

  .panel-select-btn b {
    font-weight: bold;
  }

  .panel-info {
    flex: 1;
  }

  .panel-guog {
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .itm {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    white-space: nowrap;
  }

  .chkbox {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #ddd;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 3px;
    position: relative;
  }

  .chkbox.selected::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 10px;
    border: solid #e4393c;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .panel-guog-more {
    position: relative;
    display: inline-block;
    margin-left: 10px;
  }

  .more-text {
    color: #06c;
    cursor: pointer;
    text-decoration: underline;
  }

  .more-options {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    max-height: 300px;
    overflow-y: auto;
    width: 200px;
  }

  .more-options-inner {
    padding: 10px;
  }

  .more-options ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .more-options li {
    padding: 5px 0;
    cursor: pointer;
    white-space: nowrap;
  }

  .more-options li:hover {
    background-color: #f5f5f5;
  }

  .panel-bei {
    display: flex;
    align-items: center;
    font-size: 14px;
    flex-wrap: wrap;
  }

  .panel-numsel-wrap {
    margin-right: 20px;
    white-space: nowrap;
  }

  .numsel {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 3px;
  }

  .numsel-jian, .numsel-jia {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #f5f5f5;
    font-size: 16px;
  }

  .numsel-inp {
    width: 40px;
  }

  .numsel-inp input {
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
  }

  .panel-price, .panel-bonus {
    margin: 0 20px;
    font-weight: bold;
    white-space: nowrap;
  }

  .panel-price span, .panel-bonus span {
    color: #e4393c;
  }

  /* 已选场次下拉列表 */
  .panel-select-drop {
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    position: relative;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .panel-select-drop-thead {
    background: #f5f7fa;
    border-bottom: 1px solid #ddd;
  }

  .panel-select-drop-tb {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .panel-select-drop-tb th, .panel-select-drop-tb td {
    padding: 8px 5px;
    text-align: center;
    border-bottom: 1px solid #eee;
  }

  .panel-select-drop-tbody {
    max-height: 200px;
    overflow-y: auto;
  }

  .ico-del1 {
    color: #e4393c;
    text-decoration: none;
  }

  .team {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .team-l, .team-r {
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .team-vs {
    margin: 0 5px;
    font-style: normal;
    color: #999;
  }

  .td-chked a {
    color: #e4393c;
    font-weight: bold;
  }

  .panel-lock, .panel-close {
    position: absolute;
    right: 10px;
    z-index: 10;
  }

  .panel-lock {
    top: 5px;
  }

  .panel-close {
    top: 30px;
  }

  .ico-lock, .ico-close {
    display: block;
    width: 20px;
    height: 20px;
    background: #f5f5f5;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    color: #666;
    text-decoration: none;
    cursor: pointer;
  }

  .ico-lock:before {
    content: "🔒";
    font-size: 12px;
  }

  .ico-lock.ico-lock-on:before {
    content: "🔓";
  }

  .ico-close:before {
    content: "✕";
    font-size: 14px;
  }
</style>
